
import { spawn } from 'child_process';

import { dividerProps } from 'element-plus';
<template>
  <div class="answers">
    <div class="wrapper w">
      <aside class="nav">
        <div class="nav__header">
          <div class="nav__item nav__item--active">
            <SvgIcon name="zixun" />
            <span>推荐</span>
          </div>
          <div class="nav__item">
            <SvgIcon name="zixun" />
            <span>资讯</span>
          </div>
        </div>
        <div class="nav__center">
          <div class="nav__item" v-for="item in leftNav" :key="item.id">
            <SvgIcon name="jinghao" width="20px" height="20px" color="#129d69" />
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="nav__footer">
          <div class="nav__item">
            <SvgIcon name="xiazai10" />
            <span>人工智能</span>
          </div>
          <div class="nav__item">
            <SvgIcon name="xiazai10" />
            <span>Arm大计算</span>
          </div>
        </div>
      </aside>
      <MainCard :isBtn="false" :nav="nav" v-model="switchNav" @update:modelValue="FswitchNav">
        <div class="all-list">
          <div class="wrap" v-if="Object.keys(answersPages).length != 0">
            <div class="answers__items flex-jac" v-for="item, index in  answersPages " :key="index">
              <div class="answers__items__main">
                <Article v-for="article in item.data" :key="article.id" v-bind="article" />
              </div>
              <el-pagination v-if="item.total != 0" class="pages" background layout="prev, pager, next"
                v-model:current-page="item.current" :total="item.total" :page-size="item.pagesize"
                @current-change="FanswersPages" />
            </div>
          </div>
        </div>
      </MainCard>
      <div class="answers__aside flex">
        <div class="answers__aside__header flex-jac">
          <SvgIcon name="laba" width="30px" height="30px" color="#000" />
          <span>中国开源码力榜启动，寻找开源世界的超级码丽</span>
        </div>
        <Card title="热门标签">
          <div class="tags">
            <el-tag class="tag" v-for=" item  in  tags " :key="item.id">{{ item.tagName }}</el-tag>
          </div>
        </Card>
        <Card title="热门文章" :isIcon="false">
          <div class="hot-answer">
            <div class="item flex-ac" @click="$router.push(`/special/${item.id}/details`)"
              v-for=" item, index  in  getNotTag" :key="item.id">
              <el-tag color="#f0932b" class="number">{{ index + 1 }}</el-tag>
              <span class="content">{{ item.title }}</span>
            </div>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ITag } from '@/interface/ITag';
import { INotArticle } from '@/interface/IArticle'
import { IPages } from '@/interface/pages';
import { ISpecualList } from '@/interface/ISpecual';
import MainCard from '@/view/Answers/main/index.vue';
import Article from './Article.vue';
import Card from '@/view/Answers/Card.vue';
import { ref, computed, onBeforeMount, reactive } from 'vue';
import { getNotTagApi } from '@/api/tagApi';
import { notspecualApi, specualPagesApi } from '@/api/specualApi';


const leftNav = [{ id: "1", name: "前端" }, { id: "2", name: "后端" }, { id: "3", name: "小程序" }, { id: "4", name: "iOS" }, { id: "6", name: "Android" }, { id: "7", name: "工具" }, { id: "8", name: "程序员" }, { id: "9", name: "AI" }, { id: "10", name: "云计算" }, { id: "11", name: "安全" },]
const nav = [{ id: "news", name: "推荐" }, { id: "weekly", name: "周榜" }, { id: "monthly", name: "月榜" }, { id: "news", name: "最新" }];
//热门标签
const tags = ref<ITag[]>();
// 热门回答
const getNotTag = ref<INotArticle[]>();


// 回答分页
let answersPages = reactive<{
  [key: string]: IPages<ISpecualList[]>
}>({});


const switchNav = ref(nav[0].id);

const switchCount = computed(() => {
  return nav.findIndex((item) => item.id == switchNav.value);
})
// 顶部导航栏切换请求接口
function FswitchNav(e: string) {
  switchNav.value = e;
  if (answersPages[e].data.length > 0) return;
  FanswersPages();

}
// 分页切换
function FanswersPages(current: number = 1) {
  const target = answersPages[switchNav.value];
  specualPagesApi(switchNav.value, current, target.pagesize).then(res => {
    answersPages[switchNav.value].current = res.data!.current;
    answersPages[switchNav.value].data = res.data!.data;
    answersPages[switchNav.value].total = res.data!.total;
  })
}
onBeforeMount(() => {
  let obj = {}
  // 创建文章
  for (let item of nav) {
    // @ts-ignore
    answersPages[item.id] = {
      total: 0,
      current: 1,
      pagesize: 10,
      data: [],
    }
  }
  Object.assign(answersPages, obj);
  // 热门标签
  getNotTagApi().then(res => {
    tags.value = res.data;
  })
  // 热门回答
  notspecualApi().then(res => {
    getNotTag.value = res.data;
  })
  // 最新分页
  FanswersPages();
})

</script>

<style lang="scss" scoped>
.answers {
  background-color: #e9ecef;
  padding: 20px 0;

  .wrapper {
    display: grid;
    grid-template-columns: 168px 1fr 300px;
    gap: 20px;

    .nav {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: max-content;

      &__header {
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;

      }

      &__footer {
        width: 100%;
        border-top: 1px solid #ccc;
        padding-top: 10px;
      }

      &__center {
        width: 100%;
        flex: 1;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .nav__item {
          font-size: 16px;
          gap: 10px;
        }
      }

      &__item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        padding: 12px 20px;

        &--active {
          background-color: #129d69;
          color: #fff;
          border-radius: 6px;
        }

      }
    }
  }

  &__aside {
    flex-direction: column;
    gap: 20px;

    &__header {
      color: #737373;
      padding: 6px 0;
      gap: 10px;
    }

    .tags {
      padding: 16px;
      contain: layout;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      .tag {
        padding: 6px 10px;
      }
    }

    .hot-answer {
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: center;


      .item {
        gap: 14px;
        padding: 16px;
        border-bottom: 1px solid #eee;
        color: #2C2C2C;

        .number {
          color: #fff;
        }
      }
    }
  }

  .all-list {

    width: 880px;
    height: 100%;
    overflow: hidden;

    .wrap {
      position: relative;
      display: flex;
      width: 100%;
      transition: .5s linear transform;
      transform: translate(v-bind("switchCount * -100 + '%'"), 0);
    }

    .answers__items {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      flex-shrink: 0;
      flex-direction: column;
      gap: 20px;
      background-color: #fff;
      border-radius: 4px;



      &__main {
        flex: 1;
        width: 100%;
      }
    }

    .pages {
      margin-bottom: 30px;
    }
  }

}
</style>